<template>
<div>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="姓名"
      prop="userName">
    </el-table-column>
    <el-table-column
      label="年龄"
      prop="age">
    </el-table-column>
    <el-table-column
      label="性别"
      prop="sex">
    </el-table-column>
    <el-table-column
      label="土地编号"
      prop="soilId">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          @keyup.enter.native="handleSearch"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>


    <!--修改用户信息 Form -->
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible" >

      <el-form :model="Form">

        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="Form.userName" autocomplete="off" clearable></el-input>
        </el-form-item>

        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="Form.age" autocomplete="off" clearable></el-input>
        </el-form-item>

        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="Form.sex" autocomplete="off" clearable></el-input>
        </el-form-item>

      <el-form-item label="土地编号" :label-width="formLabelWidth">
        <el-input v-model="Form.soilId" autocomplete="off" clearable></el-input>
      </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumbit">确 定</el-button>
      </div>

    </el-dialog>


</div>

</template>

<script>
import axios from "axios";
export default {
  name: "userList",
  data() {
    return {
      tableData: [{
        userName: '',
        age: '',
        sex: '',
        soilId: ''
      }],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      Form: {
        id:'',
        userName: '',
        age: '',
        sex: '',
        soilId: ''
      },
      search: ''
    }
  },
  methods: {
    selectList(){
      axios.get(`/api/user/selectAllUser`)
        .then(({data}) => {
          this.tableData=data.data;
        })
        .catch((e) => {
          console.log(e)
        })
    },
    handleEdit(row){
      this.dialogFormVisible=true
      this.Form.id=row.id
      this.Form.userName=row.userName
      this.Form.age=row.age
      this.Form.sex=row.sex
      this.Form.soilId=row.soilId
    },
    sumbit(){
      const params={
        id: this.Form.id,
        userName: this.Form.userName,
        age: this.Form.age,
        sex: this.Form.sex,
        soilId: this.Form.soilId
      }

      axios.post(`/api/user/saveUser`,params)
        .then(({data}) => {
          if (data.message=='保存成功'){
            this.$message({
              message: data.message,
              type: "success"
            })
            this.selectList();
            this.dialogFormVisible=false
          }
          else {
            this.$message({
              message: data.message,
              type: "error"
            })
          }
        })
        .catch((e) => {
          console.log(e)
        })

    },
    handleDelete(row){
      axios.get(`/api/user/deleteUser?id=${row.id}`)
        .then(({data}) => {
          if (data.message=='删除成功'){
            this.selectList();
            this.$message({
              message: data.message,
              type: "success"
            })
          }
          else {
            this.$message({
              message: data.message,
              type: "error"
            })
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },
    handleSearch(){
      axios.get(`/api/user/search?userName=${this.search}`)
        .then(({data}) => {
          if (data.message=='查询成功')
          {
            console.log(data.list)
            this.tableData=data.list;
            this.$message({
              message: data.message,
              type: "success"
            })
          }
          else {
            this.$message({
              message: data.message,
              type: "error"
            })
            this.selectList();
          }
        })
        .catch((e) => {
          console.log(e)
        })

    }
  },
  created() {
    this.selectList();
  }
}
</script>

<style scoped>
/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}


</style>
